<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>浙里建项目-用户实名认证</title>
    <style>
        @media (min-width: 240px) and (max-width: 320px) {
            html {
                font-size: 12.8px !important
            }
        }

        @media (min-width: 321px) and (max-width: 360px) {
            html {
                font-size: 14.4px !important
            }
        }

        @media (min-width: 361px) and (max-width: 375px) {
            html {
                font-size: 15px !important
            }
        }

        @media (min-width: 376px) and (max-width: 384px) {
            html {
                font-size: 15.36px !important
            }
        }

        @media (min-width: 385px) and (max-width: 414px) {
            html {
                font-size: 16.56px !important
            }
        }

        @media (min-width: 415px) and (max-width: 450px) {
            html {
                font-size: 18px !important
            }
        }

        @media (min-width: 451px) and (max-width: 500px) {
            html {
                font-size: 20px !important
            }
        }

        @media (min-width: 501px) and (max-width: 550px) {
            html {
                font-size: 22px !important
            }
        }

        @media (min-width: 551px) and (max-width: 569px) {
            html {
                font-size: 22.72px !important
            }
        }

        @media (min-width: 569px) and (max-width: 640px) {
            html {
                font-size: 25.6px !important
            }
        }

        @media (min-width: 641px) and (max-width: 667px) {
            html {
                font-size: 26.68px !important
            }
        }

        @media (min-width: 668px) and (max-width: 736px) {
            html {
                font-size: 29.44px !important
            }
        }

        @media (min-width: 738px) and (max-width: 768px) {
            html {
                font-size: 30.72px !important
            }
        }

        @media (min-width: 769px) and (max-width: 900px) {
            html {
                font-size: 31px !important
            }
        }

        @media (min-width: 901px) and (max-width: 1080px) {
            html {
                font-size: 33.24px !important
            }
        }

        html {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            background-color: aliceblue;

        }

        .header {
            height: 4.5rem;
            background-color: #2d83fc;
            color: #ffffff;
            font-family: "microsoft yahei";
            font-size: 1.5rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 0.8rem;
            font-weight: bolder;
        }

        .container {
            width: 100%;
            height: calc(100% - 4.5rem);
            background-color: #FFFFFF;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .head-pic {
            margin-top: -10rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }

        .head-pic img {
            width: 7rem;
            height: 7rem;
        }

        .head-title {
            font-size: 2rem;
            margin-top: 1.5rem;
            color: #1a1a1a;
            margin-bottom: 0.5rem;
        }

        .head-text {
            font-size: 1rem;
            margin-top: 1rem;
            color: #808080;
        }

        .head-bottom {
            margin-top: 2rem;
            font-size: 1.6rem;
            color: #2d83fc;
            cursor: pointer;
        }
    </style>
    <script th:inline="javascript">
        var result = [[${result}]]
        var resultMsg = [[${resultMsg}]]
        var username = [[${username}]]
        var idCard = [[${idCard}]]
        var type = [[${type}]]
        window.onload = function () {
            if (typeof result == "boolean" && result) {
                if (type === "1") {
                    document.getElementById("legalPersonCertification").style.display = "none";
                    document.getElementById("failCertification").style.display = "none";
                    document.getElementById("personalCertification").style.display = "";
                } else if (type === "2") {
                    document.getElementById("legalPersonCertification").style.display = "";
                    document.getElementById("failCertification").style.display = "none";
                    document.getElementById("personalCertification").style.display = "none";
                }
            } else {
                document.getElementById("legalPersonCertification").style.display = "none";
                document.getElementById("failCertification").style.display = "";
                document.getElementById("personalCertification").style.display = "none";
            }
        }
    </script>
</head>
<body>
<header class="header">
    <div>浙里建-实名认证</div>
</header>
<div class="container">
    <div class="head-pic" id="legalPersonCertification">
        <img src="../static/img/pc/img/success.png"/>
        <div class="head-title">恭喜您，实名认证成功</div>
        <div class="head-text">企业名称：[[${username}]]</div>
        <div class="head-text">统一社会信用代码：[[${idCard}]]</div>
        <div class="head-bottom">请返回系统页面</div>
    </div>
    <div class="head-pic" style="display: none;" id="failCertification">
        <img src="../static/img/pc/img/fail.png"/>
        <div class="head-title">很遗憾，实名认证失败</div>
        <div class="head-text" style="color: red">失败原因：[[${resultMsg}]]</div>
        <div class="head-bottom">请重新认证</div>
    </div>
    <div class="head-pic" style="display: none;" id="personalCertification">
        <img src="../static/img/pc/img/success.png"/>
        <div class="head-title">恭喜您，实名认证成功</div>
        <div class="head-text">姓名：[[${username}]]</div>
        <div class="head-text">身份证号码：[[${idCard}]]</div>
        <div class="head-bottom">请返回系统页面</div>
    </div>

</div>
<script>
    var headBottomArr = document.getElementsByClassName("head-bottom");
    for (let i = 0; i < headBottomArr.length; i++) {
        headBottomArr[i].addEventListener("click", function (e) {
            if (navigator.userAgent.indexOf('MSIE') > 0) { // close IE
                if (navigator.userAgent.indexOf('MSIE 6.0') > 0) {
                    window.opener = null;
                    window.close();
                } else {
                    window.open('', '_top');
                    window.top.close();
                }
            } else { // close chrome;It is effective when it is only one.
                window.opener = null;
                window.open('', '_self');
                window.close();
            }
        })
    }
</script>
</body>
</html>
